/**
 * @Description: 嘉定行首页
 * @author tao.xie
 * @date 2019-07-23 13:58
*/
<template>
  <div id="app">
    <home-title />
    <scroll :getListData="getListDataByScroll">
      <div style="overflow-y: auto;overflow-x: hidden">
        <!-- 广告轮播组件     -->
        <banner
          ref="banner"
          :bannerEnName="APP_HOME_MIDDLE_BANNER"
          :dots="true"
          height="3.733333rem"
          width="9.146667rem"
          class="home-banner"
        />
        <!-- 线路公告组件     -->
        <bus-notice ref="busNotice" />
        <!-- 入口     -->
        <tab-option />
        <!--  实时公交模块-->
        <near-by-station />
      </div>
    </scroll>
  </div>
</template>

<script>
import HomeTitle from './components/HomeTitle'
import { Banner, XBScroll } from 'vue-xb-ui-depot'
import BusNotice from './components/busnotice/BusNotice'
import TabOption from './components/TabOption'
import NearByStation from './components/NearByStation'
import { UserBeanUtils } from 'vue-xiaobu-utils'

export default {
  components: {
    HomeTitle,
    Banner,
    BusNotice,
    TabOption,
    NearByStation,
    'scroll': XBScroll
  },
  data() {
    return {
      APP_HOME_MIDDLE_BANNER: window.APP_HOME_MIDDLE_BANNER, // 广告位
      isFirstLoad: true

    }
  },
  mounted() {
    this.injectKickOutFnCallBack()
    this.registKickOutPushListener()

    // 注入页面的下拉刷新事件,并以eventbus全局事件的方式进行传播
    // window.onRefresh = () => {
    //   this.$EventBus.$emit('pageOnRefresh')
    // }
    // this.$EventBus.$on('pageRefreshFinished', () => {
    //   // 完成刷新,调用插件告知底层完成页面刷新
    //   this.$UI.then(UI => {
    //     UI.onFinishRefresh(() => {}, () => {})
    //   })
    // })
  },
  methods: {
    injectKickOutFnCallBack() {
      window.kickOutJsCallBackFn = (msg) => {
        // 清空用户信息
        UserBeanUtils.setUserInfo()
        this.$UI.then(UI => {
          UI.showDialog(
            '提示',
            msg,
            '确认',
            '取消',
            msg => {
              // eslint-disable-next-line eqeqeq
              if (msg == 0) {
                // 拉起登录,这种登录拉起方式点击了返回直接返回的是首页
                window.location.href = 'xbapp://pop/city-app/login.html?_tv=false&backtoroot=1'
              } else {
                // 返回首页
                window.location.href = 'xbapp://home?select=1'
              }
            },
            function (msg) { }
          )
        })
      }
    },
    registKickOutPushListener() {
      this.$System.then(System => {
        System.registerPushListener('90103', 'kickOutJsCallBackFn', () => { }, () => { })
      })
    },
    getListDataByScroll(pageIndex, pageCapacity) {
      return new Promise((resolve, reject) => {
        this.$EventBus.$emit('pageOnRefresh')
        if (this.isFirstLoad) {
          this.isFirstLoad = false
          resolve({ length: 0, count: 1 })
        } else {
          // 非第一次加载的时候，下拉模拟延迟1.5秒
          // TODO 是否需要下拉的时候 刷新广告位
          this.$refs.banner.getAdDataByApi()
          // TODO 是否需要下拉的时候 刷新线路公告
          this.$refs.busNotice.getList()
          setTimeout(() => {
            resolve({ length: 0, count: 1 })
          }, 1500)
        }
      })
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  background-color: #ffffff;
}
/* 修复css边距合并带来的问题 */
body {
  position: absolute;
  width: 100%;
}
#app {
  height: 100%;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 为了解决部分手机标题栏被状态栏遮挡问题 */
  padding-top: 20px;
  box-sizing: border-box;
}
.home-banner {
  margin: 32px 32px 0px 32px;
}
/*覆盖广告轮播组件的圆角央视*/
.slick-list {
  border-radius: 8px;
}
</style>
